<div class="inner-content-root">
  <div class="filter-box">
    <nz-range-picker class="date-pickers" nzShowTime="true" [(ngModel)]="dates"></nz-range-picker>
    <div class="search">
      <input type="text" [(ngModel)]="orderNo" nz-input placeholder="订单号搜索"/>
    </div>
    <div class="search">
      <input type="text" [(ngModel)]="mobile" nz-input placeholder="手机号搜索"/>
    </div>
    <div class="search">
      <input type="number" [(ngModel)]="userId" nz-input placeholder="用户ID搜索"/>
    </div>
  </div>
  <div class="filter-box">
    <span>结算状态：</span>
    <nz-select [(ngModel)]="settleStatus" class="multiple-select" [nzMaxTagCount]="settleStatusList.length"
               nzMode="multiple" [nzPlaceHolder]="'请选择结算状态'">
      <nz-option *ngFor="let item of settleStatusList" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
    </nz-select>
    <span>分销商户：</span>
    <nz-select [(ngModel)]="cpsTo" class="multiple-select" [nzMaxTagCount]="cpsToList.length" nzMode="multiple"
               [nzPlaceHolder]="'请选择分销商户'">
      <nz-option *ngFor="let item of cpsToList" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
    </nz-select>
    <span>订单状态：</span>
    <nz-select [(ngModel)]="orderStatus" class="select">
      <nz-option *ngFor="let item of orderStatusList" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
    </nz-select>
    <button class="btn" nz-button nzType="primary" (click)="queryDataInit()">搜索</button>
  </div>
  <div class="filter-box">
    <button class="btn" [disabled]="!checked&&!indeterminate" nz-button nzType="default" (click)="settle('pass')">审核通过
    </button>
    <button class="btn" [disabled]="!checked&&!indeterminate" nz-button nzType="default" nzDanger
            (click)="settle('reject')">审核不通过
    </button>
    <button class="btn" [disabled]="!checked&&!indeterminate" nz-button nzType="primary" (click)="settleDone()">提现
    </button>
    <button class="btn" nz-button nzType="dashed" (click)="export()" [nzLoading]="exportHttpConfig.showLoading">导出
    </button>
  </div>
  <div class="filter-box">
    <span class="filter-tips">已选择订单金额：<span style="color: orangered">{{ checkedAmount }}</span></span>
    <nz-divider nzType="vertical"></nz-divider>
    <span class="filter-tips">已选择分佣金额：<span style="color: orangered">{{ checkUserBackAmount }}</span></span>
  </div>
  <div class="content">
    <nz-table #basicTable
              nzBordered
              [nzData]="dataList"
              [(nzPageIndex)]="pageIndex"
              [(nzPageSize)]="pageSize"
              [nzFrontPagination]="false"
              [nzShowPagination]="true"
              [nzShowSizeChanger]="true"
              [nzPageSizeOptions]="[10,50,100,200]"
              [nzLoading]="defaultHttpConfig.showLoading"
              [nzTotal]="pageTotal"
              (nzPageIndexChange)="queryData()"
              (nzPageSizeChange)="queryData()">
      <thead>
      <tr>
        <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th>
        <th>用户ID</th>
        <th>用户</th>
        <th>分销商户</th>
        <th>订单号</th>
        <!--        <th>平台</th>-->
        <th nzWidth="400px">商品</th>
        <th>商品单价</th>
        <th>下单数量</th>
        <th>下单金额</th>
        <th>订单状态</th>
        <th>结算状态</th>
        <th>返利金额</th>
        <th>返利比例</th>
        <th>提现信息</th>
        <th>平台返利</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td
          [nzChecked]="setOfCheckedId.has(data.cpsOrderId)"
          (nzCheckedChange)="onItemChecked(data.cpsOrderId, $event)"
        ></td>
        <td>{{ data.userId }}</td>
        <td>{{ data.mobile }}<br/>{{ data.userMemo }}</td>
        <td>{{ data.cpsToStr }}</td>
        <td>{{ data.orderNo }}<br/>{{ data.orderTime }}</td>
        <td>商品ID: {{ data.goodsId }}<br/>{{ data.goodsName }}</td>
        <td>{{ (data.orderAmount / data.num).toFixed(2) }}</td>
        <td>{{ data.num }}</td>
        <td>{{ data.orderAmount }}<span *ngIf="data.settleStatus=='done'">(提现时:{{ data.settleOrderAmount }})</span>
        </td>
        <td>{{ data.orderStatusStr }}</td>
        <td>{{ data.settleStatusStr }}<br/>{{ data.settleTime }}</td>
        <td>
          <input type="number" [(ngModel)]="data.userCashBack" [disabled]="data.settleStatus=='done'" nz-input/>
        </td>
        <td>
          <input type="number" [(ngModel)]="data.userRebate" [disabled]="data.settleStatus=='done'" nz-input/>
        </td>
        <td>{{ data.payTypeStr }}<br/>{{ data.payAccount }}</td>
        <td>{{ data.cashBack }}<br/>{{ data.rebate }}</td>
        <td>
          <button nz-button nzType="link" (click)="save(data)">保存</button>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</div>

